<template>
  <div>
    <van-tabs v-model="activeTab">
      <van-tab    v-for="(item, index) in tabs"  :title="tabs[index]" :name=index @click="handleTabClick()"></van-tab>
      <!-- <van-tab title="页面2" name="2" @click="handleTabClick('2')"></van-tab>
      <van-tab title="页面3" name="3" @click="handleTabClick('3')"></van-tab> -->
    </van-tabs>

    <van-tab-pane v-if="activeTab === '1'"  name="1">
      <!-- 第一个标签页的内容 -->
      1111111
    </van-tab-pane>

    <van-tab-pane v-if="activeTab === '2'" name="2">
      222222222222222
      <!-- 第二个标签页的内容 -->
    </van-tab-pane>

    <van-tab-pane v-if="activeTab === '3'" name="3">
      3333333333333
      <!-- 第三个标签页的内容 -->
    </van-tab-pane>
  </div>
</template>

<script>
export default {
  data() {
      return {
       tabs: {
        0: "全部",
        1: "待付款",
        2: "待发货",
        3: "待收货",
        4: "已完成",
      },
      activeTab: '1'
    };
  },
  methods: {
     handleTabClick() {
      if (this.activeTab=='1') {
         alert(1)
      } else if (this.activeTab=='2') {
         alert
      }
      alert(tabName)
      // 在这里处理标签页点击事件
      console.log('点击了标签页', tabName);
     },
    handleTabClickA(tabName) {
      alert(tabName)
      // 在这里处理标签页点击事件
      console.log('点击了标签页', tabName);
    }
  }
};
</script>